<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose } from "echarts/core";
import {
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  TitleComponent
} from "echarts/components";
import { LineChart } from "echarts/charts";

let myChart, myCanvas;
onMounted(() => {
  use([
    CanvasRenderer,
    GridComponent,
    TooltipComponent,
    DatasetComponent,
    TitleComponent,
    LineChart,
  ]);
  myCanvas = document.getElementById("can1");
  myChart = init(myCanvas);
  let option = {
    title: {
        text: 'dataset二维数组配置数据',
        left: 'center',
    },
    xAxis: {
      type: "category",
    },
    yAxis: {},
    tooltip: {},
    dataset: {
      // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
      source: [
        ["product", "2015", "2016", "2017"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
        ["Walnut Brownie", 72.4, 53.9, 39.1],
      ],
    },
    series: [
      {
        type: "line",
      },
      {
        type: "line",
      },
      {
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
});

onUnmounted(() => {
  dispose(myChart);
  myChart = null;
});
</script>

<style>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
